<div class="m-player"
  (click)="selfClick = true"
>

  <div class="lock">
    <div class="left"><i></i></div>
  </div>

  <div class="hand"></div>

  <div class="container">
    <div class="wrap">
      <div class="btns">
        <i class="prev" (click)="onPrevClick(currentIndex - 1)"></i>
        <i class="toggle" [class.playing]="playing" (click)="onToggleClick()"></i>
        <i class="next" (click)="onNextClick(currentIndex + 1)"></i>
      </div>

      <div class="head">
        <img [src]="picUrl" alt="">
        <i class="mask"></i>
      </div>

      <div class="play">
        <div class="words clearfix">
          <p class="ellipsis margin-bottom-none">{{ currentSong?.name }}</p>
          <ul class="songs clearfix margin-bottom-none">
            <li *ngFor="let singer of currentSong?.ar; last as isLast;">
              <a>{{ singer.name }}</a>
              <span [hidden]="isLast">/</span>
            </li>
          </ul>
        </div>

        <div class="bar">
          <div class="slider-wrap">
            <app-slider [bufferOffset]="bufferPercent"
                        [(ngModel)]="percent"
                        (valueAfterChange)="onPercentChange($event)"
            ></app-slider>
          </div>

          <span class="time">
            <em>{{ currentTime | formatTime}}</em> / {{ duration | formatTime}}
          </span>

        </div>

      </div>

      <div class="oper">
        <i class="like" title="收藏"></i>
        <i class="share" title="分享"></i>
      </div>

      <div class="ctrl">
        <i class="volume" title="音量" (click)="onVolumePanelClick()"></i>
        <i [ngClass]="currentMode.type"
           [title]="currentMode.label"
           (click)="changePlayMode()"></i>
        <p class="open" (click)="onPlayerPanelClick()">
          <span></span>
        </p>

        <div class="control-vol" [hidden]="showVolumePanel">
          <app-slider [vertical]="true"
                      [(ngModel)]="volume"
                      (ngModelChange)="onVolumeChange($event)"
          ></app-slider>
        </div>
      </div>

      <app-player-panel
        [songList]="songList"
        [currentSong]="currentSong"
        [currentIndex]="currentIndex"
        [show]="showPlayerPanel"
        (closeEvent)="showPlayerPanel = false"
        (changeSongEvent)="changeSongClick($event)"
      ></app-player-panel>

    </div>
  </div>

  <audio #audio
         [src]="currentSong?.url"
         (canplay)="audioCanPlay()"
         (timeupdate)="audioTimeUpdate($event)"
         (ended)="audioPlayEnded($event)"
  ></audio>

</div>
